<template>
  <div class="ctrl-warp">
    <div class="energy red" @click="pixelZoom(true)">
      放大
    </div>
    <div class="ctrl-c-warp">
      <div class="arrow-btn " @click="carouselChangeClick(true)">
        <em class="iconfont icon-zuo"/>
      </div>
      <div class="g-warp">
        <el-carousel @change="carouselChange" ref="carouselRef" height="50px" arrow="never" indicator-position="none"
                     :loop="false"
                     :autoplay="false">
          <el-carousel-item v-for="(group,index) in colorList">
            <div class="g-warp-parent">
              <div :tips="item.name" @mouseout="colorItemMouseout" @mouseover="colorItemMouseover"
                   @click="colorSelect(item)"
                   v-for="item in group" class="color-item " :class="{active:item.active}"
                   :style="{background: item.color}">
                <span class='color-keymap'>{{ item.keyName }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="arrow-btn " @click="carouselChangeClick(false)">
        <em class="iconfont icon-zuo right"/>
      </div>
    </div>
    <div class="color-item-add" @click="addColorClick">
      <em class="iconfont icon-tianjia"></em>
    </div>
    <div class="energy blue " @click="pixelZoom(false)">
      缩小
    </div>
  </div>

  <el-tooltip
      ref="tooltipRef"
      v-model:visible="tipVisible"
      placement="top-start"
      :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }"
      :virtual-ref="colorItemRef"
      virtual-triggering
      trigger="hover"
      popper-class="singleton-tooltip"
  >
    <template #content>
      <span> {{ tipsText }} </span>
    </template>
  </el-tooltip>

  <el-dialog v-model="visible" title="添加颜色" width="400px">
    <el-form
        ref="addColorFromRef"
        :model="addColorFrom"
        status-icon
        :rules="addColorFromRules"
        label-width="120px"
    >
      <el-form-item label-width="70px" label="名称" prop="name">
        <el-input
            v-model="addColorFrom.name"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="70px" label="快捷键" prop="keyName">
        <el-input @keydown.stop.prevent="keymapInput"
                  v-model="addColorFrom.keyName"
                  type="text"
                  autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="70px" label="色值" prop="color">
        <el-input v-model="addColorFrom.color" readonly @click="modelColorClick">
          <template #prepend>
            <el-color-picker ref="colorPickerRef" v-model="addColorFrom.color" size="small"
                             :predefine="colorPreDefine"/>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitAddColorFrom">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, onMounted, computed, reactive, watch, defineProps, defineEmits} from "vue"
import {ElMessage} from 'element-plus'
import {useGameStore} from "../../store";
import colorPreDefineData from "../../assets/data/colorPreDefine"
import arrayUtil from "../../utils/ArrayUtil"

let gameStore = useGameStore();
const props = defineProps<{ carouseIndex: number }>();
const emit = defineEmits<{
  (e: 'update:carouseIndex', carouseIndex: number): void
}>()

//tips
let tipVisible = ref(false);
let tooltipRef = ref();
let colorItemRef = ref();
let tipsText = ref("");
//tips end

let carouselRef = ref(null);
let colorPickerRef = ref(null);
let visible = ref(false);
//选色面板预设
let colorPreDefine = ref(colorPreDefineData);

let carouseCurIndex = 0;
let defColor = '#fff';

//表单
let addColorFromRef = ref(null);
let addColorFrom = reactive({
  name: '',
  keyName: '',
  keyCode: '',
  color: defColor,
})
const addColorFromRules = reactive({
  name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
  keyName: [{required: true, message: '快捷键不能为空', trigger: 'blur'}],
  color: [{required: true, message: '色值不能为空', trigger: 'change'}],
})

//计算属性
let colorList = computed(() => {
  return arrayUtil.splitArr(gameStore.colorList, 10)
})
//监听属性
watch(() => props.carouseIndex, (newValue, oldValue) => {
  if (newValue != carouseCurIndex) {
    carouselRef.value.setActiveItem(newValue);
  }
})

//事件
let tipsTimeout = null;
let colorItemMouseover = (e) => {
  colorItemRef.value = e.currentTarget;
  tipsText.value = e.currentTarget.getAttribute('tips');
  tipVisible.value = true
  if (tipsTimeout) clearTimeout(tipsTimeout);
  tipsTimeout = setTimeout(() => {
    tipVisible.value = false;
  }, 2000);
}
// let colorItemMouseout = (e) => {
//   tipVisible.value = false;
// }


let pixelZoomTimeout = null;
let zoomNum = 0;
let pixelZoom = (isBig: boolean) => {
  zoomNum += isBig ? 1 : -1;
  if (pixelZoomTimeout) clearTimeout(pixelZoomTimeout);
  pixelZoomTimeout = setTimeout(() => {
    let flag = gameStore.zoomPixel(zoomNum);
    if (!flag) {
      ElMessage.error('已经缩放到最小尺寸了')
    }
    zoomNum = 0;
  }, 300)
}
let colorSelect = (item) => {
  gameStore.setColorSelect(item.keyCode);
}
let carouselChangeClick = (isUp: boolean) => {
  carouselRef.value[isUp ? 'prev' : 'next']();
}
let carouselChange = (index) => {
  carouseCurIndex = index;
  if (props.carouseIndex != index)
    emit('update:carouseIndex', index);
}

let addColorClick = () => {
  visible.value = true;
}

let keymapInput = (e) => {
  let {keyCode, key} = e;
  addColorFrom.keyCode = keyCode
  addColorFrom.keyName = key;
}
let modelColorClick = (e) => {
  colorPickerRef.value.handleTrigger();
}
let submitAddColorFrom = () => {
  addColorFromRef.value.validate((valid) => {
    if (valid) {
      let success = gameStore.addCtrlColor({
        color: addColorFrom.color,
        keyCode: addColorFrom.keyCode,
        keyName: addColorFrom.keyName,
        name: addColorFrom.name,
        active: false
      });
      if (success) {
        visible.value = false;
        let carouseIndex = colorList.value.length - 1;
        gameStore.setColorSelect(addColorFrom.keyCode);
        emit('update:carouseIndex', 2);
        addColorFrom.color = defColor;
        addColorFrom.keyCode = '';
        addColorFrom.keyName = '';
        addColorFrom.name = '';
      } else {
        ElMessage.error("快捷键冲突，请重新设置快捷键");
      }
    } else {
      return false
    }
  })
}

</script>

<style scoped lang="scss">

</style>
